@import '~@/scss/GlobalVariables';

.wrap {
  background-color: $background-color-3;
  background-image: url('~@/assets/images/background/right.png'),
    url('~@/assets/images/background/left.png');
  background-repeat: no-repeat, no-repeat;
}

// Desktop
@media all and (min-width: calc(#{$tablet-width} + 1px)) {
  .wrap {
    padding: 100px 0;
    background-position: right top, left 80px;
  }
}

// Tablet
@media all and (min-width: calc(#{$mobile-width} + 1px)) and (max-width: $tablet-width) {
  .wrap {
    padding: 50px 0;
    background-position: calc(100% + 35px) -70px, -60px 80px;
    background-size: 100px, 200px;
  }
}

// Mobile
@media all and (max-width: $mobile-width) {
  .wrap {
    padding: 50px 0;
    background-position: calc(100% + 35px) -70px, -60px 80px;
    background-size: 100px, 170px;
  }
}

.page-title {
  text-align: center;
  margin-bottom: 60px;

  h2 {
    font-size: 45px;
    margin-bottom: 30px;
  }
  p {
    max-width: 600px;
    margin: 0 auto;
  }
}

.ether-unit-reference-guide {
  margin-top: 60px;

  .block-title {
    text-align: center;
  }

  .unit-table {
    margin-top: 20px;
    table {
      width: 100%;
      border-top: 1px solid $light-grey-3;
      tr {
        position: relative;
        border-bottom: 1px solid $light-grey-3;
        td {
          padding: 18px 10px;
          position: relative;

          span {
            position: absolute;
            top: 3px;
            left: 17px;
            font-size: 9px;
            margin-top: -10px;
          }
        }
      }
    }
  }

  .unit-short {
    & > div {
      position: relative;
    }
  }
}

@media all and (max-width: 760px) {
  .unit-long {
    display: none;
  }
}
